<template>
  <div class="content-box">
    <a-row>
      <a-col :span="4" v-for="(item,ind) in tabs" :key="ind" >
        <router-link :to="{name:item.pathName}">
            <div class="tabbox" :style='styleObject(ind)' >
                <p><a-icon :type="item.icon" /></p>
                <p>{{item.title}}</p>
                <p>{{item.value}}</p>
            </div>
        </router-link>
      </a-col>
    </a-row>
    <a-row :gutter="[20,20]">
      <a-col :span="12">
        <div class="col">
            <p  class="title">待处理</p>
            <a-row>
                <a-col :span="12">
                    <div class="col2">
                        <div class="lines">
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>待确认订单</p> 
                                <p class="value" >18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="col2"> 
                        <div>
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>待配送订单</p> 
                                <p class="value">18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="col">
            <p  class="title">库存有效期提醒</p>
            <a-row>
                <a-col :span="12">
                    <div class="col2">
                        <div class="lines">
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>即将过期库存</p> 
                                <p class="value">18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="col2"> 
                        <div>
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>已过期库存</p> 
                                <p class="value">18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[20,20]">
        <a-col :span="14">
            <div class="tbox">
                <p  class="title">证照有效期提醒</p>
                1
            </div>
        </a-col>
        <a-col :span="10">
            <div class="tbox">
                <p  class="title">证照总体情况</p>
                2
            </div>
        </a-col>
    </a-row>  
  </div>
</template>

<script>
export default {
    components:{
    },
    props:{
        tabs:{
            type:Array,
            default:()=>{
                return [
                    {icon:"edit",title:'证照未推送',pathName:"basicTable",value:"16"},
                    {icon:"database",title:'品种未维护证照',pathName:"basicTable",value:"136"},
                    {icon:"bank",title:'生产企业未维护证照',pathName:"basicTable",value:"126"},
                    {icon:"compass",title:'证照未审核',pathName:"basicTable",value:"0"},
                    {icon:"highlight",title:'证照已驳回',pathName:"basicTable",value:"1"},
                    {icon:"contacts",title:'厂家授权书未关联注册证',pathName:"basicTable",value:"6"},
                ]
            }
        }
    },
    data(){
        return{
            tabarr:{},
            colors:["#068df6","#229fff","#3caaff","#5cb8ff","#80c8ff","#a2d7ff"],
        }
    },
    computed:{
        styleObject() {
            return (ind)=>{
                return {
                    "--background-color": this.colors[ind],
                    "--background-color-hover": " #0073e6",
                };
            }
        },
    },
    methods:{

    }
}
</script>

<style scoped>
/* :style="{ backgroundColor: colors[ind]}" */

.content-box {
  background-color: #fff;
  width: 100%;
  height: calc(100vh - 123px);
  overflow: hidden;
}
.tabbox{
    height: 164px;
    width: 100%;
    background-color: var(--background-color);
    color: #fff;
    text-align: center;
    padding-top: 10px;
}

.tabbox:hover{
    background-color:var(--background-color-hover);
}
.tabbox p{
    margin-bottom: 0px;
}
.tabbox p:first-child{
    font-size:58px;
}
.tabbox p:nth-child(3){
    font-size:20px;
    color: #ffea00;
    
}
.col {
  height: 162px;
  border: 1px solid #ddd;
  font-size: 16px;
}
.title{
    line-height: 40px;
    padding-left: 38px;
    color: #333333;
    background-color: #e6ebf2;
    margin-bottom: 0;
}
.col2{
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lines{
    height: 80%;
    border-right:1px solid #ddd;
}
.col2>div:first-child{
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon{
    font-size: 40px;
    color: seagreen;
}
.cont{
    height: 48px;
}
.cont p{
    height: 24px;
    margin: 0px;
}
.value{
    font-size:20px;
    color: #fc7d00;
}
.tbox{
    border: 1px solid #ddd;
}
</style>